// const { default: axios } = require("axios");
// 歌曲播放页面的逻辑代码
(function () {
    // 获取地址栏的id
    let params = new URLSearchParams(document.location.search.substring(1));
    let id = params.get("id");

    const song = new Vue({
        el: '#song',
        data: {
            imgUrl: '',
            // 歌曲名称
            nickname: '',
            // 歌手
            singer: '',
            album: '',
            // 展开与收起开关 
            falg: true,
            // 总评论数量
            PinLunNum: 0,
            wordCount: '',
            maxlength: 140,
            // 定时器开关
            timer:null,
            // 圈数
            n:0
        },
        methods: {
            getMusicUrl() {
                // 获取音乐 url
                console.log(id);
                axios({
                    url: '/song/url',
                    params: {
                        id
                    }
                }).then(res => {
                    console.log('获取音乐 url');
                    console.log(res.data.data[0].url);
                    let url = res.data.data[0].url;
                    document.querySelector('audio').src = url;
                });
            },
            getLyric() {
                // 获取歌词
                axios({
                    url: '/lyric',
                    params: {
                        id
                    }
                }).then(res => {
                    if (res.data.nolyric) {
                        $('.lyric pre').html('暂未歌词')
                        return;
                    }
                    console.log(res.data);
                    let {
                        lrc: lyric,
                        nolyric
                    } = res.data
                    console.log(lyric.lyric);

                    $('.lyric pre').html(lyric.lyric)
                })
            },
            // 获取歌曲详情
            getgequxiangqing() {
                console.log(id);
                axios({
                    url: '/song/detail',
                    params: {
                        ids: id,
                    }
                }).then(res => {
                    console.log('获取歌曲详情');
                    console.log(res.data);
                    let obj = res.data.songs[0]
                    console.log(obj);
                    let {
                        //歌曲名称
                        name: nickname,
                        al: {
                            name,//歌手名字
                            picUrl
                        },
                    } = obj;
                    let album;
                    console.log(obj.originSongSimpleData);
                    if (obj.originSongSimpleData) {
                        album = obj.originSongSimpleData.albumMeta.name
                    } else {
                        album = '其他'
                    }
                    console.log(nickname, name, picUrl, album || '其他');
                    this.imgUrl = picUrl;
                    this.nickname = nickname;
                    this.singer = name;
                    this.album = album || '其他';

                });
            },
            // 获取歌手 mv
            getSongMV() {
                axios({
                    url: '/artist/mv',
                    params: {
                        id: 8325
                    }
                }).then(res => {
                    console.log('获取歌手 mv');
                    console.log(res.data);
                }).catch(err => {
                    console.log(err);
                });

                axios({
                    url: '/artist/detail',
                    params: {
                        id: 8325
                    }
                }).then(res => {
                    console.log('获取歌手详情');
                    console.log(res.data);
                }).catch(err => {
                    console.log(err);
                    TypeError(111)
                });


            },
            // 展开与收起
            unfold() {
                if (this.falg) {
                    $('.lyric pre').css({
                        height: 'auto'
                    })
                    $('#unfold').html(`
                   收起 <span class="glyphicon glyphicon-triangle-top"></span>
                   `)
                } else {
                    $('.lyric pre').css({
                        height: '250px'
                    })
                    $('#unfold').html(`
                   展开 <span class="glyphicon glyphicon-triangle-bottom"></span>
                   `)
                }
                this.falg = !this.falg;
            },
            // 获取评论
            getComment() {
                axios({
                    url: '/comment/music',
                    params: {
                        id,
                        limit: getRandom(20, 50), //20-50随机数
                    }
                }).then(res => {
                    console.log('获取歌曲评论');
                    console.log(res.data);
                    let {
                        comments,
                        hotComments
                    } = res.data;
                    // 热门评论
                    console.log(hotComments);
                    if (!hotComments.length) {
                        $('#jcpl').html('');
                    } else {
                        $('#jcpl > .jcpl').append(`<h4>精彩评论（${hotComments.length}）</h4>`);
                        hotComments.forEach((item, index) => {
                            // console.log(item);
                            let time = item.time;
                            let user = item.user;
                            let content = item.content;
                            // console.log(content);
                            // console.log(user);
                            let avatarUrl = user.avatarUrl;
                            let nickname = user.nickname;
                            //点赞数量
                            let likedCount = item.likedCount;
                            //渲染热门评论
                            // $('#jcpl > .jcpl').html('');
                            $('#jcpl > .jcpl').append(`
                        <div class="flex space-between flex-end">
                            <div class="left">
                                <img src=${avatarUrl} class="img-circle" alt="Image">
                                <div>
                                    <p><a href="javascript:;" class="nickname">${nickname}</a>：<span class="content" title=${content}>${content}</span></p>
                                <p class="time">${formatDate(time).substr(0,10)}</p>
                                </div>

                            </div>
                            <div class="right">
                                <span class="glyphicon glyphicon-thumbs-up"></span>${likedCount}
                                | <span class="glyphicon glyphicon-share"></span> |
                                <span class="glyphicon glyphicon-pencil"></span>
                            </div>
                    </div>
                        `);
                        });
                    }
                    // 渲染最近评论
                    $('#zxpl > .jcpl').append(`<h4>最近评论（${res.data.comments.length}）</h4>`)
                    res.data.comments.forEach((item, index) => {
                        // console.log(item);
                        let time = item.time;
                        let user = item.user;
                        let content = item.content
                        let avatarUrl = user.avatarUrl
                        let nickname = user.nickname;
                        let likedCount = item.likedCount
                        // console.log(time, content, avatarUrl, nickname);
                        //渲染热门评论
                        // $('#zxpl > .jcpl').html('');
                        $('#zxpl > .jcpl').append(`
                            <div class="flex space-between flex-end">
                                <div class="left">
                                    <img src=${avatarUrl} class="img-circle" alt="Image">
                                    <div>
                                        <p><a href="javascript:;" class="nickname">${nickname}</a>：<span class="content" title=${content}>${content}</span></p>
                                    <p class="time">${formatDate(time).substr(0,10)}</p>
                                    </div>

                                </div>
                                <div class="right">
                                    <span class="glyphicon glyphicon-thumbs-up"></span>${likedCount}
                                    | <span class="glyphicon glyphicon-share"></span> |
                                    <span class="glyphicon glyphicon-pencil"></span>
                                </div>
                        </div>
                            `);
                    })
                    this.PinLunNum = res.data.hotComments.length + res.data.comments.length;
                })
            },
            // 检测字符
            CountStrByte(e) {
                this.maxlength--
                this.wordCount += e.data
            },
            // 发送评论(请求失败)
            sendComment() {
                // this.maxlength = 140
                $('.comment textarea').val('');
                axios({
                    url: '/comment',
                    params: {
                        id,
                        t: 1,
                        tpye: 0,
                        content: '哈哈哈',
                    }
                }).then(res => {
                    console.log('发送评论');
                    console.log(res.data);
                }).catch(err => {
                    console.log(err);
                });

            },
            // 检测音乐是否播放
            roll(flag) {
                // this.n = 0;
                this.timer = setInterval(() => {
                    this.n += 10;
                    $('#u-cove').css({
                        transform: 'rotate(' + this.n + 'deg)'
                    })
                }, 100);
            },
            // 返回上一级
            goBack() {
                history.go(-1)
            },
            // 暂停和播放音乐
            playMusic(flag) {
                console.log(this);
                document.querySelector('audio').play();
                clearInterval(this.timer)
                this.timer = setInterval(() => {
                    this.n += 10;
                    $('#u-cove').css({
                        transform: 'rotate(' + this.n + 'deg)'
                    })
                }, 100);
            },
            stopMusic(flag) {
                document.querySelector('audio').pause();
                clearInterval(this.timer);
            },
        },
        computed: {

        },
        created() {
            this.getMusicUrl();
            this.getLyric();
            this.getgequxiangqing();
            this.getSongMV();
            this.getComment();
            this.roll(true)
        },
    });
    // 一些其他操作
    console.log($('.lyric pre').height());
    if ($('.lyric pre').height() > 250) {
        $('#unfold').hide()
    } else {
        $('#unfold').show()
    }


}());

// var audioStatus = "paused";
// var audio = document.getElemnentById("myAudio");
// audio.addEventListener("playing", function () {
//     audioStatus = "playing";
// });
// audio.addEventListener("pause", function () {
//     audioStatus = "paused";
// });

const obj = {
    "name": "august",
    "id": 1465111917,
    "pst": 0,
    "t": 0,
    "ar": [{
        "id": 44266,
        "name": "Taylor Swift",
        "tns": [],
        "alias": []
    }],
    "alia": [],
    "pop": 100,
    "st": 0,
    "rt": "",
    "fee": 4,
    "v": 5,
    "crbt": null,
    "cf": "",
    "al": {
        "id": 92895788,
        "name": "folklore (deluxe version)",
        "picUrl": "https://p2.music.126.net/1-WYcjngQv-gd7X0o-NuFA==/109951165163258166.jpg",
        "tns": [],
        "pic_str": "109951165163258166",
        "pic": 109951165163258160
    },
    "dt": 261922,
    "h": {
        "br": 320000,
        "fid": 0,
        "size": 10479325,
        "vd": -43547
    },
    "m": {
        "br": 192000,
        "fid": 0,
        "size": 6287613,
        "vd": -40946
    },
    "l": {
        "br": 128000,
        "fid": 0,
        "size": 4191756,
        "vd": -39261
    },
    "a": null,
    "cd": "01",
    "no": 8,
    "rtUrl": null,
    "ftype": 0,
    "rtUrls": [],
    "djId": 0,
    "copyright": 0,
    "s_id": 0,
    "mark": 262144,
    "originCoverType": 0,
    "originSongSimpleData": null,
    "resourceState": true,
    "single": 0,
    "noCopyrightRcmd": null,
    "mv": 0,
    "rtype": 0,
    "rurl": null,
    "mst": 9,
    "cp": 7003,
    "publishTime": 0
}
// let {
//     name: nickname,
//     al: {
//         name,
//         picUrl
//     },
//     originSongSimpleData: {
//         albumMeta: {
//             name: album
//         }
//     }
// } = obj